<template>
  <template v-if="type === 'button'">
    <el-button
      @click="onOpen"
      :disabled="disabled"
      :type="linkType"
      :class="$attrs.class"
      v-limit="[deleteData]"
      >{{ text }}</el-button
    >
  </template>
  <template v-if="type === 'link'">
    <el-link
      :type="linkType"
      @click.prevent="onOpen"
      :disabled="disabled"
      :class="$attrs.class"
      v-limit="[deleteData]"
      >{{ text }}</el-link
    >
  </template>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
  props: {
    type: {
      type: String as PropType<'link' | 'button'>,
      require: true,
    },
    text: {
      type: String,
      require: true,
    },
    infoType: {
      type: String,
      require: true,
    },
    linkType: {
      type: String,
      default: () => 'info',
    },
    title: {
      type: String,
      default: () => 'lang.operate.hint',
    },
    content: {
      type: String,
      require: true,
    },
    requestData: {
      type: Function as PropType<() => Promise<any>>,
      required: true,
    },
    updateData: {
      type: Function as PropType<() => any>,
      default: () => ({}),
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    deleteData: {
      type: String,
      default: '',
    },
  },
  methods: {
    onOpen() {
      const that: any = this
      that
        .$confirm(this.content, that.$i18n.t(this.title), {
          confirmButtonText: that.$i18n.t('lang.operate.confirm'),
          cancelButtonText: that.$i18n.t('lang.operate.cancel'),
          type: this.infoType,
        })
        .then(() => {
          ElMessage({
            message: that.$i18n.t('lang.message.operateSuccess'),
            type: 'success',
          })
          this.requestData().then(() => this.updateData())
        })
    },
  },
})
</script>
